<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />		
	<title>组团啦</title>
	<link rel="stylesheet" href="public/css/bootstrap.min.css" />
	<link rel="stylesheet" href="public/css/simple-line-icons.min.css" />
	<link rel="stylesheet" href="public/css/font-awesome.min.css" />
	<link rel="stylesheet" href="public/css/components.css" />
	<link rel="stylesheet" href="http://cdn.zutuan.la/metronic/plugins/jquery-tags-input/jquery.tagsinput.css" />
	<link rel="stylesheet" href="public/css/profile.css" />
	<link rel="stylesheet" href="public/css/public.css" />
	
	<style>
		.zt-error {
			position: static !important;
			line-height: 30px;
			color: red !important;
		}
	</style>
</head>
<body>
<div class="margin-top-20">
	<div class="container">
		<div class="portlet light min-height" style="overflow: hidden;">
			<div class="portlet light">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-settings"></i>
						<span class="caption-subject bold uppercase">创建社团</span>
					</div>
				</div>
				<div class="portlet-body form">
					
					<input type="file" name="" id="Logo" style="display: none;" />
					
					<form class="form-horizontal" role="form" id="ClubCreateForm" method="post" action="">
						<div class="form-body">
							<div class="row">
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">社团名称</label>
								<div class="col-md-6">
									<input id="" name="clubname" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">社团logo</label>
								<div class="col-md-6">
									<a class="btn btn-default" id="ChooseLogo">
										<span class="icon-plus"></span>
									</a>
									<input type="hidden" name="logo" id="LogoPath" />
								</div>
							</div>
							<!--学校-->
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">学校</label>
								<div class="col-md-6">
									<input id="" class="form-control" disabled type="text">
								</div>
							</div>
							<!--社团标签-->
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">社团标签</label>
								<div class="col-md-6">
									<label class="checkbox-inline">
									  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
									</label>
									<label class="checkbox-inline">
									  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
									</label>
									<label class="checkbox-inline">
									  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
									</label>
								</div>
							</div>
							<!--部门设置-->
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">部门设置</label>
								<div class="col-md-6">
									<input id="tags_1" type="text" class="form-control" value="foo,bar,baz,roffle" />
								</div>
							</div>

							<!--社长昵称-->
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">社长姓名</label>
								<div class="col-md-6">
									<input id="" class="form-control" type="text">
								</div>
							</div>
							<!--联系电话-->
							<div class="form-group form-md-line-input">
								<label class="col-md-2 control-label" for="">联系方式</label>
								<div class="col-md-6">
									<input id="" name="relationTel" class="form-control" type="text">
								</div>
							</div>
							<!--社团简介-->
							<div class="form-group form-md-line-input">
								<label for="" class="col-md-2 control-label">社团简介</label>
								<div class="col-md-6">
									<textarea class="form-control" placeholder="" rows="3"></textarea>
								</div>
							</div>
							</div>
						</div>
						<div class="form-actions">
							<div class="row">
								<div class="col-md-offset-2">
									<button type="submit" class="btn btn-orange">创建社团</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>
</div>


<script src="public/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cdn.zutuan.la/metronic/plugins/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script src="http://cdn.zutuan.la/metronic/plugins/jquery-validation/js/jquery.validate.min.js"></script>
<!-- js:file upload -->

<script type="text/javascript">
	function validateForm() {
        $("#ClubCreateForm").validate({
        	errorClass: 'zt-error',
            rules: {
                clubname: {
                    required: true,
                    rangelength: [2, 16],
                },
                relationTel: {
                    required: true,
                }
            },
            messages: {
                clubname: {
                    required: "请输入社团名称",
                    rangelength: "社团名称在2到16个字符之间",
                },
                relationTel: {
                    required: "请填写联系方式",
                }
            },
            submitHandler: function (form, event) {
                event.preventDefault();
                var params = $("#ClubCreateForm").serialize();
                var requUrl = basePath + "/organ/saveOrgan";
                $.ajax({
                    type: 'post',
                    url: requUrl,
                    data: params,
                    dataType: 'json',
                    success: function (data) {
                        if (data == 1) {
                            alert('成功创建社团');
                            window.location.href = "${basePath}/profile-club";
                        } else {
                            alert('创建社团失败');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert('创建社团失败');
                        //window.location.href = basePath+"/organ/clublist";
                    }
                });
                //window.location.href = basePath+"/organ/clublist";
            }
        });
    }
	
	function logoUploadComplete(path) {
		$('#LogoPath').val(path);
		var Img = document.createElement("img");
		Img.src = path;
		document.getElementById("ChooseLogo").innerHTML = Img.outerHTML;
	};
	
	function doSaveLogo() {
        var fileName = $("#Logo").val();
        var type = fileName.split(".");
        var ftype = type[type.length - 1]; //获取文件后缀
        $.ajaxFileUpload({
            url: '${basePath}/files/upload/' + ftype,
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'files', //文件上传域的ID
            dataType: 'json', //返回值类型 一般设置为json
            success: function (data, status) //服务器成功响应处理函数
            {
                if (data.result == 0) {
                	var fileId = data.data[0].id;
                	var filePath = '/files/view/jpg/' + fileId;
                	logoUploadComplete(filePath);
                }
            },
            error: function (data, status, e) //服务器响应失败处理函数
            {
                alert(e);
            }
        });
    }
	
	$(function() {
		$('#tags_1').tagsInput({
        	defaultText: "点击输入",
    	});
    	
    	$('#Logo').change(doSaveLogo);
		
		$('#ChooseLogo').click(function (e) {
			e.preventDefault();
			$('#Logo').trigger('click');
		});
		
		validateForm();
	});
</script>
</body>
</html>
